<!-- 视频上传 -->
<template>
    <div>
        <header class="upload">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 视频上传 </el-breadcrumb-item>
            </el-breadcrumb>
        </header>
        <div class="container">
            <el-form :model="VideoForm" status-icon ref="VideoForm" label-width="100px" class="demo-VideoForm">
                <el-form-item label="上传时间" prop="addtime">
                    <span> {{ VideoForm.addtime }}</span>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                       <el-switch
                        v-model="VideoForm.states"
                        active-value="1"
                        inactive-value="2"
                        active-color="#13ce66"
                        @change="changeswitch($event)"
                        inactive-color="#ff4949"
                        active-text="显示中"
                        inactive-text="未显示"
                    >
                    </el-switch>
                </el-form-item>
                <el-form-item label="视频链接" prop="file">
                    <el-input v-model="VideoForm.Videolink" placeholder="请输入视频链接"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="adress"> </el-form-item>
                <el-form-item label="视频上传" prop="Video">
                    <el-upload
                        class="avatar-uploader el-upload--text"
                        action="http://yztapi.medozb.com/api/admin/upload_img"
                        :data="{
                            token: this.token,
                            url: 'file',
                            is_name: 0
                        }"
                        :on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                        :on-progress="uploadVideoProcess"
                        :show-file-list="false"
                    >
                        <div class="container_add" id="container_id">+</div>
                        <el-progress
                            v-if="videoFlag == true"
                            type="circle"
                            :percentage="videoUploadPercent"
                            style="margin-top: 30px"
                        ></el-progress>
                    </el-upload>
                    <P class="text">请保证视频格式正确，且不超过10M</P>
                </el-form-item>
                <el-form-item label="视频预览" prop="flie">
                    <video v-if="VideoForm.Video != ''" :src="VideoForm.Video" class="avatar" controls="controls">
                        您的浏览器不支持视频播放
                    </video>
                    <i v-else-if="VideoForm.Video == ''" class="el-icon-plus avatar-uploader-icon"></i>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="disabled" @click="SubmitForm(VideoForm)">提交表单</el-button>
                    <el-button>刷新</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Header from '../common/Header.vue';
export default {
    components: { Header },
    data() {
        return {
            toekn: '',
            VideoForm: {
                videoUploadId: '',
                Video: '',
                states: '',
                addtime:'',
                Videolink:''
            },
            Videolink: '',
            videoFlag: true,
            videoUploadPercent: 0,
            disabled: true,
            addtime: '',
            VideoList:[]
        };
    },
    mounted() {
        
    },
    created() {
        this.getkey();
        this.Videolist()
    },
    methods: {
        // 获取token
        getkey() {
            this.token = sessionStorage.getItem('token');
        },
        //获取当前上传视频详情
        Videolist(){
            this.$axios.get('admin/video_details',{
                params:{
                    token:sessionStorage.getItem('token'),
                }
            }).then(res =>{
                this.Videolist = res.data.data
                this.VideoForm.addtime = this.Videolist.addtime
                this.VideoForm.states = this.Videolist.states
                this.VideoForm.Videolink = this.Videolist.file
                this.VideoForm.Video = this.Videolist.file
                console.log(this.VideoForm.Video)
            })
        },
        //获取当前的时间
        date2str(x, y) {
            var z = {
                y: x.getFullYear(),
                M: x.getMonth() + 1,
                d: x.getDate(),
                h: x.getHours(),
                m: x.getMinutes(),
                s: x.getSeconds()
            };
            return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function (v) {
                return ((v.length > 1 ? '0' : '') + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2));
            });
        },
        //验证视频大小和视频格式
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/webm'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt10M) {
                this.$message.error('上传视频大小不能超过10MB哦!');
                return false;
            }
        },
        //上传进度显示
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = Math.floor(event.percent);
        },
        //上传成功
        handleVideoSuccess(res, file) {
            console.log(res);
            console.log(file);
            //获取上传图片地址
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if (res.code === 2000) {
                this.VideoForm.videoUploadId = res.data.img;
                console.log(this.VideoForm.videoUploadId);
                this.VideoForm.Video = res.data.imgs;
                document.getElementById('container_id').style.display = 'block';
                this.disabled = false;
                this.VideoForm.addtime = this.date2str(new Date(), 'yyyy-MM-d h:m:s');
            } else {
                this.$message.error('视频上传失败，请重新上传！');
            }
        },
        SubmitForm() {
            this.$axios.post('admin/video_update', {
                token: this.token,
                file_url: this.VideoForm.videoUploadId,
                url: this.VideoForm.Video,
                states: this.VideoForm.states
            }).then(res =>{
                console.log(res)
            })
        },
        changeswitch(e) {
            console.log(e);
        }
    }
};
</script>
<style scoped>
.upload {
    /* border: 1px solid black; */
    margin-top: 5px;
}
.container {
    margin-top: 8px;
}
.el-input {
    width: 450px;
}
.avatar {
    width: 300px;
    height: 400px;
}
/deep/.el-upload {
    width: 180px;
}
/deep/.el-upload--text {
    width: 180px;
}
.container_add {
    position: absolute;
    display: none;
    margin-left: 72px;
    margin-top: 77px;
    z-index: 100;
    font-size: 50px;
    color: gray;
    font-weight: 500;
}
</style>